<!DOCTYPE html>
<head>
    <title>明信片制作</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- head 中 -->
    <link rel="stylesheet" th:href="@{/jquery-weui/lib/weui.css}">
    <link rel="stylesheet" th:href="@{/jquery-weui/css/jquery-weui.css}">
    <script type="text/javascript" th:src="@{/jquery-weui/lib/jquery-2.1.4.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jquery-weui/js/jquery-weui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jsfiles/crypto-js.min.js?t=1}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jsfiles/com.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jsfiles/hammer.min.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jsfiles/iscroll-zoom-min.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jsfiles/lrz.all.bundle.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/jsfiles/PhotoClip.js?t=1423}" charset="utf-8"></script>

    <style>
        .the_hand {
            width: 45px;
            height: 45px;
            /* 指定动画效果 */
            animation: name 0.75s ease infinite;
            /* 指定手的浮动 */
            position: absolute;
            z-index: 1;
            margin: 75px 102px;
        }
        @keyframes name{
            0% {transform: scale(1);}
            50% {transform: scale(1.25);}
            100% {transform: scale(1)}
        }
        html{
            height: 100%;
        }
        body{
            width: 100%;
            height:100%;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            height:100%;
        }
        .flex{
            /*flex 布局*/
            display: flex;
            /*实现垂直居中*/
            align-items: center;
            /*实现水平居中*/
            justify-content: center;
            flex-direction: column;
            text-align: justify;
            width:100%;
            height:55%;
            background: #f6f6f6;
            margin:0 auto;
        }
        .mb {

        }
        /*照片展示的div，对应活动制作页的背景图片*/
        .wdzpzs_h{
            width: 100%;
            height: 100%;
            z-index: 100000;
            position: absolute;
            background-color:rgba(0,0,0,0.8);
            background: url("/stamp/image/mxp_bjtp.png") no-repeat center center fixed;
            background-size: cover;
            display: none;
        }
        /*照片展示的div，对应活动制作页的背景图片*/
        .wdzpzs_s{
            width: 100%;
            height: 100%;
            z-index: 100000;
            position: absolute;
            background-color:rgba(0,0,0,0.8);
            background: url('/stamp/image/mxp_bjtp.png') no-repeat center center fixed;
            background-size: cover;
            display: none;
        }
        .container_h {
            display: flex; /* 使用Flexbox布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 容器高度设置为视口高度 */
            flex-direction: column;
        }
        .content_h {
            width: 100%; /* 内容宽度 */
            display: flex; /* 使用Flexbox布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            flex-direction: column;
        }
        .wdzp_h{
            width:360px;
            height:260px;
            margin-left: -28px;
            margin-top: -30px;
        }
        .wdzp_div_h{
            width:301px;
            height:230px;
            background: url("");
            background-size:100% 100%;
        }
        .container_s {
            display: flex; /* 使用Flexbox布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 容器高度设置为视口高度 */
            flex-direction: column;
        }
        .content_s {
            width: 100%; /* 内容宽度 */
            display: flex; /* 使用Flexbox布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            flex-direction: column;
        }
        /*这个是相框背景*/
        .wdzp_s{
            width: 383px;
            height: 472px;
            margin-left: -50px;
            margin-top: -33px;
        }
        .wdzp_div_s{
            width:280px;
            height:420px;
            background-size:100% 100%;
        }
        /* 修改标题的文字大小 */
        .weui-dialog__title {
            font-size: 24px;
        }
        .weui-dialog__bd {
            font-size: 20px;
        }
        /* 修改按钮的文字大小和内边距 */
        .weui-dialog__btn {
            font-size: 20px;
            padding: 10px 20px;
        }
        .image-container {
            border: 2px solid #006847; /* 边框宽度为5px，样式为实线，颜色为黑色 */
            background-color: #f0f0f0; /* 底色为浅灰色 */
            display: inline-block; /* 或者根据需要使用其他方式来确保容器正确显示 */
            width: 90px;
            height: 100px;
        }

        .image-container img {
            display: block; /* 防止图片下方有空隙 */
            width: 100%; /* 使图片宽度填满容器 */
            height: 100px;
        }
        .image-container_h {
            border: 2px solid #006847; /* 边框宽度为5px，样式为实线，颜色为黑色 */
            background-color: #f0f0f0; /* 底色为浅灰色 */
            display: inline-block; /* 或者根据需要使用其他方式来确保容器正确显示 */
            width: 169px;
            height: 100px;
        }

        .image-container_h img {
            display: block; /* 防止图片下方有空隙 */
            width: 100%; /* 使图片宽度填满容器 */
            height: 100px;
        }
    </style>

</head>
<body>
<input id="uploaderInput" type="file" accept="image/*" multiple="" style="display: none">
<input id="uploaderInput1" type="file" accept="image/*" multiple="" style="display: none">
<input id="stmbid" type="hidden" value="0">
<input id="htmbid" type="hidden" value="0">
<input id="storht" type="hidden" value="1"><!--1 竖图 2 横图-->
<input id="hd_id" name="hd_id" type="hidden" value="">
<input id="xm_id" name="xm_id" type="hidden" value="">
<div id="khxz" class="weui-popup__container popup-bottom">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="weui-msg">
            <div class="weui-msg__text-area">
                <h4 class="weui-msg__title" style="color: #007b44;font-weight: bold;font-size: 18pt">专属明信片</h4>
                <br>
                <p class="weui-msg__desc" style="font-size: 15pt;color: #0d0d0d;text-align: left">
                    ·产品介绍：个性化定制邮资明信片(6寸)，含亚克力相框。
                </p>
                <div style="height: 3px;"></div>
                <p class="weui-msg__desc" style="font-size: 15pt;color: #0d0d0d;text-align: left">
                    ·价格：30元/套(包邮)，如有兑换码可直接兑换。
                </p>
                <div style="height: 3px;"></div>
                <p class="weui-msg__desc" style="font-size: 15pt;color: #0d0d0d;text-align: left">
                    ·发货时间：下单后3个工作日内发货。
                </p><div style="height: 3px;"></div>
                <p class="weui-msg__desc" style="font-size: 15pt;color: #0d0d0d;text-align: left">
                    ·客服电话：18162604181
                </p><div style="height: 3px;"></div>
                <p class="weui-msg__desc" style="font-size: 15pt;color: #0d0d0d;text-align: left">
                    ·下单后如审核未通过，将在5个工作日内为您退款。
                </p><div style="height: 3px;"></div>
                <p class="weui-msg__desc" style="font-size: 15pt;color: #0d0d0d;text-align: left">
                    ·请勿上传违法、违规图片。
<!--                </p><div style="height: 23px;"></div>-->
<!--                <h4 class="weui-msg__title" style="color: #007b44;font-weight: bold;font-size: 18pt">用户协议</h4>-->
<!--                <div style="font-size: 16pt;color: black;text-align: left;">&ensp;&ensp;&ensp;&ensp;现将本人或经他人许可的照片，授权给武汉邮政制作个性化邮票，本授权即日起生效。本人放弃署名权并为此授权承担因授权不实或提供资料不完整引起的法律责任和经济赔偿责任。特此授权。</div>-->
<!--                <div style="font-size: 16pt;color: red;text-align: left;">注：个性化邮票服务项目，只接受中国公民个人肖像照片。照片须为本人真实完整面容。图片中不能出现动物，不能出现任何字样，不能带墨镜帽子。<br></div>-->
                <br>
            </div>
        </div>

        <div class="weui-btn-area">
            <a class="weui-btn weui-btn_disabled weui-btn_primary" id="tykhxz" name="tykhxz" href="javascript:" style="background-color: #007b44;color: white;font-size: 18pt;font-weight: bolder">阅读 (1)</a>
        </div>
        <div style="height: 20px;"></div>
    </div>
</div>
<div id="wdzpzs_h" class="wdzpzs_h">
    <div id="container_h" class="container_h">
        <div class="content_h">
            <div style="z-index: 99999;color: black;font-size: 30pt;font-weight: bolder;padding-bottom: 60px;">预览图</div>
            <div id="wdzp_div_h" class="wdzp_div_h">
                <div>预览图</div>
                <!--这里是背景相框,暂时固定-->
                <img id="wdzp_h" src="/stamp/image/mxp_hb.png?t=12" class="wdzp_h">
            </div>
        </div>
        <div style="height: 55px;"></div>
        <table style="width: 100%">
            <tr>
                <td style="text-align: center;padding-left: 15px;"><a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #007b44;color: white;width: 120px;font-size:16pt;font-weight: bold;border: 1px solid #007b44" onclick="on_gb();">上 一 步</a></td>
                <td style="text-align: center;padding-right: 15px;"><a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #007b44;color: white;width: 120px;font-size:16pt;font-weight: bold;border: 1px solid #007b44" onclick="on_qd();">下 一 步</a></td>
            </tr>
        </table>
    </div>
</div>
<div id="wdzpzs_s" class="wdzpzs_s">
    <div id="container_s" class="container_s">
        <div class="content_s">
            <div style="z-index: 99999;color: black;font-size: 30pt;font-weight: bolder;padding-bottom: 60px;">预览图</div>
            <div id="wdzp_div_s" class="wdzp_div_s">
                <!--这里是背景相框,暂时固定-->
                <img id="wdzp_s" src="/stamp/image/mxp_sb.png?t=12" class="wdzp_s">
            </div>
        </div>
        <div style="height: 55px;"></div>
        <table style="width: 100%">
            <tr>
                <td style="text-align: center;padding-left: 15px;"><a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #007b44;color: white;width: 120px;font-size:16pt;font-weight: bold;border: 1px solid #007b44" onclick="on_gb();">上 一 步</a></td>
                <td style="text-align: center;padding-right: 15px;"><a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #007b44;color: white;width: 120px;font-size:16pt;font-weight: bold;border: 1px solid #007b44" onclick="on_qd();">下 一 步</a></td>
            </tr>
        </table>
        <div>

        </div>
    </div>
</div>
<div class="main">
    <!--照片选择区域-->
    <div class="flex">
        <div id="sctpdiv" style="display: block">
            <img class="the_hand" src="/stamp/image/hand.png" onclick="xztp();"></img>
            <img id="sctp" src="/stamp/image/upload_tip.png" onclick="xztp();">
        </div>
        <div id="yhtpdiv" onclick="xztp();" style="display: none">
            <div id="a" name="a" style="position: absolute;z-index: 99;pointer-events: none;opacity:0">
                <img id="bj" src="/stamp/image/icon_sb.jpg" style="">
            </div>
            <div id="yhtp" style="z-index: -1;"></div>
        </div>
        <div style="display: none" id="yhtpdiv1" onclick="xztp1();">
            <div id="a1" name="a1" style="position: absolute;z-index: 99;pointer-events: none;opacity:0">
                <img id="bj1" src="/stamp/image/icon_hb.jpg" style="">
            </div>
            <div id="yhtp1" style="z-index: -1;"></div>
        </div>
        <div style="height: 10px;"></div>
        <div style="text-align: center;color: red;font-size: 18px;">请选择高清明亮的照片上传，可调整照片到合适位置。</div>
    </div>

    <!--模板选择区域-->
    <div class="weui-footer weui-footer_fixed-bottom" style="height: 44%;">
        <div style="width: 100%;height: 70px;border: 3px solid #f6f6f6;line-height: 6px;display: none" id="tsbz0">
            <table style="height: 100%;width: 100%">
                <tr><td colspan="5">&nbsp;</td></tr>
                <tr class="mb">
                    <td style="width: 10%">&nbsp;</td>
                    <td style="width: 35%;text-align: center">
                        <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #007b44;color: white;font-size:14pt;font-weight: bold" onclick="stmb(this);" id="stmb">竖图模板</a>
                    </td>
                    <td style="width: 10%">&nbsp;</td>
                    <td style="width: 35%;text-align: center">
                        <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: white;color: #007b44;font-size:14pt;font-weight: bold;border: 1px solid #007b44" onclick="htmb(this);" id="htmb">横图模板</a>
                    </td>
                    <td style="width: 10%">&nbsp;</td>
                </tr>
            </table>
            <table style="height: 100%;width: 100%;display: none" id="tsbz1">
                <tr><td colspan="5">&nbsp;</td></tr>
                <tr class="mb">
                    <td style="width: 10%">&nbsp;</td>
                    <td style="width: 35%;text-align: center">
                        <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #007b44;color: white;font-size:14pt;font-weight: bold" onclick="stmb(this);" id="stmb">竖图模板</a>
                    </td>
                    <td style="width: 10%">&nbsp;</td>
                    <td style="width: 35%;text-align: center">
                        <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: white;color: #007b44;font-size:14pt;font-weight: bold;border: 1px solid #007b44" onclick="htmb(this);" id="htmb">横图模板</a>
                    </td>
                    <td style="width: 10%">&nbsp;</td>
                </tr>
            </table>
        </div>
        <div style="height: 20px"></div>
        <div style="width: 100%;height: 110px;overflow-x: scroll;white-space: nowrap;" id="stdiv">
            <img src="/stamp/image/icon_sb.jpg?12" width="93px" height="103px" onclick="qhbj(this,'0');">

        </div>
        <div style="width: 100%;height: 110px;display: none;overflow-x: scroll;white-space: nowrap;" id="htdiv">
            <img src="/stamp/image/icon_hb.jpg?34" width="169px" height="103px" onclick="qhbj1(this,'0');">
        </div>
        <div id = "result"></div>
        <div style="height: 10px"></div>

        <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #007b44;color: white;width: 80%;font-size:16pt;font-weight: bold" id="qrta">下一步</a>
        <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #007b44;color: white;width: 80%;font-size:16pt;font-weight: bold;display: none" id="qrta1">下一步</a>
        <div style="height: 10px"></div>
        <table style="width: 100%">
            <tr>
                <td style="vertical-align: bottom">
                    <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: white;color: #007b44;width: 60%;font-size:14pt;font-weight: bold;border: 1px solid #007b44;" id="ghtp" onclick="xztp();">更换图片</a>
                    <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: white;color: #007b44;width: 60%;display: none;font-size:14pt;font-weight: bold;border: 1px solid #007b44" id="ghtp1" onclick="xztp1();">更换图片</a>
                </td>
                <td style="vertical-align: bottom">
                    <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: white;color: #007b44;width: 60%;font-size:14pt;font-weight: bold;border: 1px solid #007b44" onclick="hdsy();">回到首页</a>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
<!-- body 最后 -->

<script>

    //客户须知部分，暂时每次进入都显示
    $("#khxz").popup();
    var secs = 1;
    $("#tykhxz").addClass("weui-btn_disabled");
    for(var i=1;i<=secs;i++) {
        window.setTimeout("update(" + i + ")", i * 1000);
    }
    function update(num) {
        if(num == secs) {
            $("#tykhxz").html("我同意");
            $("#tykhxz").removeClass("weui-btn_disabled");
            $("#tykhxz").addClass("close-popup");
        }
        else {
            var printnr = secs-num;
            $("#tykhxz").html("阅读 (" + printnr +")");
        }
    }
    //活动id
    var hd_id = "[[${hd_id}]]";
    var xm_id = "[[${xm_id}]]";
    var adminUrl = "[[${adminUrl}]]";
    //后端地址
    var url = "[[${serverUrl}]]/stamp/h5/api/";
    //图片显示
    var url1 = "[[${serverUrl}]]/stamp/tp/";
    function init_data(){
        $.showLoading("数据加载中...");
        var jsonData = {
            hd_id: hd_id,
            timestamp:new Date().getTime()
        };
        var sendStr = {
            data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a_h5"),localStorage.getItem("b_h5"))
        };
        $.ajax({
            type:"post",
            url:url+"get_hd_mb",
            data:JSON.stringify(sendStr),
            dataType:"json",
            timeout : 10*1000, //超时时间设置，单位毫秒
            crossDomain: true,
            contentType: 'application/json;charset=UTF-8',
            headers: {
                "token": localStorage.getItem("token_h5")
            },
            beforeSend: function(request) {
                request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
            },
            success:function(result){
                $.hideLoading();
                if (result.code==0){
                    let rtn = decrypt_str(result.data,localStorage.getItem("a_h5"),localStorage.getItem("b_h5"));
                    console.info("rtn:"+rtn);
                    rtn = JSON.parse(rtn);
                    //处理模版1
                    var str="";
                    rtn.stampHdMbList1.forEach(function(item) {
                        str+="<div class='image-container'><img src=\""+url1+"mbtp?id="+item.urlId+"&isslt=0\" width=\"90px\" height=\"100px\" onclick=\"qhbj(this,"+item.id+");\"></div>&nbsp;";
                    });
                    $("#stdiv").append(str);
                    str="";
                    rtn.stampHdMbList2.forEach(function(item) {
                        str+="<div class='image-container_h'><img src=\""+url1+"mbtp?id="+item.urlId+"&isslt=0\" width=\"169px\" height=\"100px\" onclick=\"qhbj1(this,"+item.id+");\"></div>&nbsp;";
                    });
                    $("#htdiv").append(str);
                    $("#hd_id").val(rtn.stampHd.urlId);
                    $("#xm_id").val(rtn.stampHd.urlXmId);
                    $("#wdzpzs_h").css('background-image', "url("+url1+"hdbj?id="+rtn.stampHd.urlId+")");
                    $("#wdzpzs_s").css('background-image', "url("+url1+"hdbj?id="+rtn.stampHd.urlId+")");
                    $("#wdzp_h").attr('src', url1+"hbxk?id="+rtn.stampHd.urlId+"?t=123");
                    $("#wdzp_s").attr('src', url1+"sbxk?id="+rtn.stampHd.urlId+"?t=123");
                    //改变相框和背景图片
                    if (rtn.stampHd.tsbz=="1"){
                        $("#tsbz1").show();
                    }
                    if (rtn.stampHd.tsbz=="0"){
                        $("#tsbz0").show();
                    }

                }else if (result.code==500){
                    $.alert("活动加载错误！");
                }else {
                    $.alert("活动加载错误！");
                }
            },
            error:function(result){
                $.hideLoading();
            },complete:function(){
                $.hideLoading();
            }
        });
    }

    //初始化数据
    init_data();

    //确定
    function on_qd(){
        window.location.href=adminUrl+"/h5/card/wdzp?hd_id="+$("#hd_id").val()+"&xm_id="+$("#xm_id").val()+"";
    }
    //关闭
    function on_gb(){
        $("#wdzpzs_s").hide();
        $("#wdzpzs_h").hide();
        //关闭时候，隐藏这两处背景
        $('#yhtp').css('background-image', '');
        $('#yhtp1').css('background-image', '');
    }

    var rank = $(window).width() / 6.4

    //竖版
    $('#a').css({
        "width": rank * 3.18+"px",
        "height": rank * 4.68+"px"
    })
    $('#yhtpdiv').css({
        "width": rank * 3.18+"px",
        "height": rank * 4.68+"px"
    })
    $('#yhtp').css({
        "width": rank * 3.18+"px",
        "height": rank * 4.68+"px"
    })
    $('#bj').css({
        "width": rank * 3.18+"px",
        "height": rank * 4.68+"px"
    })

    //横版
    $('#a1').css({
        "width": rank * 5.8+"px",
        "height": rank * 3.88+"px"
    })
    $('#yhtpdiv1').css({
        "width": rank * 5.8+"px",
        "height": rank * 3.88+"px"
    })
    $('#yhtp1').css({
        "width": rank * 5.8+"px",
        "height": rank * 3.88+"px"
    })
    $('#bj1').css({
        "width": rank * 5.8+"px",
        "height": rank * 3.88+"px"
    })

    function xztp(){
        var a = $("#storht").val()
        if (a=="1")
            $("#uploaderInput").click();
        else if (a=="2") $("#uploaderInput1").click();
    }
    function xztp1(){
        var a = $("#storht").val()
        if (a=="1")
            $("#uploaderInput").click();
        else if (a=="2") $("#uploaderInput1").click();
    }
    function dataURLtoFile(dataurl) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], 'file.jpg', {
            type: mime
        });
    }
    var pc_tp;
    var pc = new PhotoClip('#yhtpdiv', {
        // size: [312, 389],
        size: [rank * 3.18, rank * 4.68],
        outputSize: [1000, 1500],
        file: '#uploaderInput',
        view: '#yhtp',
        ok: '#qrta',
        loadStart: function() {
            //alert("竖图开始");
            $("#sctpdiv").hide();
            $("#yhtpdiv").show();
            console.log('开始读取照片');
        },
        loadComplete: function(dataURL) {
            pc_tp = dataURL;
            if (dataURL.width < 1000 && dataURL.height < 1000) {
                $.alert("上传图片精度不够，请重新选择图片！推荐大于1000*1000");
                setTimeout(function () {
                    pc.clear();
                    $("#sctpdiv").show();
                    $("#yhtpdiv").hide();
                    $('#uploaderInput').val('')
                }, 500)
            }
        },
        done: function(dataURL) {
            if (is_null(dataURL)){
                $.alert("您还没有上传图片！");
                return;
            }
            var id = $("#stmbid").val();
            if (id==""){
                $.alert("没有选择模板！");
                return;
            }
            $.showLoading("图片生成中");
            $.ajax({
                type: "post",        // 请求方式
                url: url+"qrta", // 请求路径
                data: {"imgDate": dataURL,"lx":"1","stmbid":id,"hdid":hd_id},
                crossDomain: true,
                headers: {
                    "token": localStorage.getItem("token_h5")
                },
                success: function (res) {   // data是形参名，代表返回的数据

                    var data = res.split("|");
                    if (data[0]=="fail"){
                        $.alert("图片生成失败["+data[1]+"]", "错误!");
                    }else if (data[0]=="suc"){
                        $("#wdzp_div_s").css('background-image', "url("+url1+"wdzp?id="+data[1]+"&token="+localStorage.getItem("token_h5")+")");
                        $("#wdzpzs_s").show();
                        $("#wdzpzs_h").hide();

                    }
                },
                error:function(res){
                    $.alert("服务器未响应！图片生成失败", "错误！");
                },
                complete:function(res){
                    $.hideLoading();
                }
            });
        },
        fail: function(msg) {
            $.alert(msg, "错误！");
        }
    });

    var pc1 = new PhotoClip('#yhtpdiv1', {
        // size: [498, 318],
        size: [rank * 5.8, rank * 3.88],
        outputSize: [1500, 1000],
        file: '#uploaderInput1',
        view: '#yhtp1',
        ok: '#qrta1',
        loadStart: function() {
            //alert("横图开始");
            $("#sctpdiv").hide();
            $("#yhtpdiv1").show();
            console.log('开始读取照片');
        },
        loadComplete: function(dataURL) {
            if (dataURL.width < 1000 && dataURL.height < 1000) {
                $.alert("上传图片精度不够，请重新选择图片！推荐大于1000*1000");
                setTimeout(function () {
                    pc.clear();
                    $("#sctpdiv").show();
                    $("#yhtpdiv1").hide();
                    $('#uploaderInput1').val('')
                }, 500)
            }
        },
        done: function(dataURL) {
            if (is_null(dataURL)){
                $.alert("您还没有上传图片！");
                return;
            }
            var id = $("#htmbid").val();

            if (id==""){
                $.alert("没有选择模板！");
                return;
            }
            $.showLoading("图片生成中");
            $.ajax({
                type: "post",        // 请求方式
                url: url+"qrta", // 请求路径
                data: {"imgDate": dataURL,"lx":"2","htmbid":id,"hdid":hd_id},
                crossDomain: true,
                headers: {
                    "token": localStorage.getItem("token_h5")
                },
                success: function (res) {   // data是形参名，代表返回的数据
                    var data = res.split("|");
                    if (data[0]=="fail"){
                        $.alert("图片生成失败!", "错误！");
                    }else if (data[0]=="suc"){
                        $("#wdzp_div_h").css('background-image', "url("+url1+"wdzp?id="+data[1]+"&token="+localStorage.getItem("token_h5")+")");
                        $("#wdzpzs_h").show();
                        $("#wdzpzs_s").hide();

                    }
                },
                error:function(res){
                    $.alert("服务器未响应！图片生成失败", "错误！");
                },
                complete:function(res){
                    $.hideLoading();
                }
            });
        },
        fail: function(msg) {
            $.alert(msg);
        }
    });

    function qhbj(obj,id){
        try{
            if ($("#uploaderInput1").val()=="" && $("#uploaderInput").val()==""){
                $.toast("请先上传图片！", "text");
                return;
            }
            else{
                if (id=="0"){
                    $("#bj").attr("src","");
                    $("#stmbid").val("0");
                    $("#a").css("opacity","0");
                }else{
                    $("#bj").attr("src",obj.src);
                    $("#stmbid").val(id);
                    $("#a").css("opacity","1");
                }
            }
        }catch (e) {
            alert(e);
        }


    }
    function qhbj1(obj,id){

        //这里换成

        if ($("#uploaderInput1").val()=="" && $("#uploaderInput").val()==""){
            $.toast("请先上传图片！", "text");
            return;
        }
        else {
            if (id == "0") {
                $("#bj1").attr("src", "");
                $("#htmbid").val("0");
                $("#a1").css("opacity", "0");
            } else {
                $("#bj1").attr("src", obj.src);
                $("#htmbid").val(id);
                $("#a1").css("opacity", "1");
            }
        }
    }

    function stmb(obj){
        $("#storht").val("1");

        $("#stdiv").show();
        $("#htdiv").hide();

        if ($("#uploaderInput").val()=="") {
            //如果竖图不为空，需要填充竖图？
            if ($("#uploaderInput1").val()==""){
                $("#yhtpdiv").hide();
                $("#yhtpdiv1").hide();
            }else{

                //将用户竖图复制到用户横图即可
                var $file = $("#uploaderInput1");
                var fileObj = $file[0];
                var windowURL = window.URL || window.webkitURL;
                dataURL = windowURL.createObjectURL(fileObj.files[0]);

                pc.load(dataURL);

                $("#yhtpdiv1").hide();
                $("#yhtpdiv").show();
            }
        }else{
            $("#yhtpdiv").show();
            $("#yhtpdiv1").hide();
        }

        $("#ghtp1").hide();
        $("#ghtp").show();

        $("#qrta1").hide();
        $("#qrta").show();


        obj.style.color = "white";
        obj.style.backgroundColor ="#007b44";
        document.getElementById("htmb").style.color = "#007b44";
        document.getElementById("htmb").style.backgroundColor = "white";
        document.getElementById("htmb").style.border = "1px solid #007b44";
    }
    //需要切换图片
    function htmb(obj){
        $("#storht").val("2");

        //如果没有图片，不切换
        if ($("#uploaderInput1").val()=="") {

            if ($("#uploaderInput").val()==""){
                $("#yhtpdiv").hide();
                $("#yhtpdiv1").hide();
            }else{
                //将用户竖图复制到用户横图即可
                var $file = $("#uploaderInput");
                var fileObj = $file[0];
                var windowURL = window.URL || window.webkitURL;
                dataURL = windowURL.createObjectURL(fileObj.files[0]);

                pc1.load(dataURL);
                $("#yhtpdiv").hide();
                $("#yhtpdiv1").show();
            }
        }else{
            $("#yhtpdiv").hide();
            $("#yhtpdiv1").show();
        }

        $("#stdiv").hide();
        $("#htdiv").show();


        $("#ghtp").hide();
        $("#ghtp1").show();

        $("#qrta").hide();
        $("#qrta1").show();

        obj.style.color = "white";
        obj.style.backgroundColor ="#007b44";
        document.getElementById("stmb").style.color = "#007b44";
        document.getElementById("stmb").style.backgroundColor = "white";
        document.getElementById("stmb").style.border = "1px solid #007b44";
    }
    function hdsy(){
        window.location.href=adminUrl+"/h5/myhome/index?id="+encodeURIComponent(xm_id);
    }



</script>